<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="vue.js"></script>

<!-- 1.引入路由插件 -->
<script src="vue-router.js"></script>
<script>

    var Login={
        template:`
        <div>
            <div>i am login page </div>
        </div>
        `,
    }
    var Register={
        template:`
        <div>
            <div>i am Register page </div>
        </div>
        `,
    }
    var Buy={
        template:`
        <div>
            <div>i am buy page </div>
        </div>
        `,
    }
    // 2.使用路由插件
    Vue.use(VueRouter);
    //3.创建路由对象
    var router=new VueRouter({
        routes:[{path:'/login',name:'login',component:Login},
        {path:'/register',name:'register',component:Register},
        {path:'/buy',name:'buy',component:Buy}
            ]
    })


    new Vue({
        el:"#app",
        router,
        template:`
        <div>
          
            <router-link to='/login'>go login| </router-link>
            <router-link to='/register'>go Register </router-link>
            <div>
            <button @click='gologin'>click go to login</button>
            <button @click='goregister'>click go to register</button>
            <button @click='gobuy'>click go to buy</button>
            <button @click='back'>click go back</button>
        </div>
        <router-view></router-view>
        </div>
        `,
        methods:{
            gologin:function(){
                this.$router.push({path:'/login'});
                
            },
            goregister:function(){
                this.$router.push({path:'/register'})
            },
            gobuy:function(){

                //replace跟push是一样的功能，不过replace是不往history记录这次操作，因此当返回时就会返回上上次链接
                this.$router.replace({path:'/buy'})
            },
            back:function(){
                this.$router.go(-1)
            }
        }
        

    })
</script>
</html>